<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>点击飞入购物车效果</title>

<script src="lib/jquery.min.js"></script>

<script> 

$(document).ready(function(){ 

    $(".run").click(function(){ 

        var menID =  $(this).attr("id");

        var thisTop = $("#img_" + menID).offset().top; //所在位置的高度

        var thisLeft = $("#img_" + menID).offset().left; //所在位置的宽度

         animatenTop(thisTop,thisLeft);

        return false; 

    }); 

}); 

function animatenTop(thisTop,thisLeft) {

    var CopyDiv = '<img src="img/download.png" id="box" style="top:' + thisTop + 'px;left:' + thisLeft + 'px" />';

    var topLength =  $(".shopMenu li").offset().top; //取得到购物车的宽度

    var leftLength = $(".shopMenu li").offset().left; //取得到购物车的宽度 

    $("body").append(CopyDiv);

    $("body").children("#box").animate({width: "30px",height: "30px","top": topLength, "left": leftLength, "opacity": .1  }, 900, function(){console.log(this);$(this).remove()});

}

</script>

<style type="text/css">

body{

    font-family: "宋体",Arial;

}

ul{

    margin: 0;

    padding: 0;

    list-style:none;

}

.Listbox {

    width:150px;

    border:1px solid #ccc;

    margin-left: 100px;

}

.Listbox li {

    width:150px;

    text-align: center;

}

.shopMenu {

    border:1px solid #ccc;

    width:150px;

    margin-left: 500px;

    text-align: center;

}

.shopMenu{

    margin: 0;

    padding: 0;

    margin:200px 0 0 150px;

}

.shopMenu li{

    text-align: center;

    width: 150px;

    height: 150px;

    line-height: 150px;

}

#box {

    height: 120px;

    width: 126px;

    position: absolute;

}

</style>

</head>

<body>

<ul class="Listbox">

    <li>

        <img src="img/pic.png" width="100" id="img_1" />

    </li>

    <li><a href="#" class="run" id="1">click me</a></li>

</ul>

<ul class="shopMenu">

    <li>空盒</li>

</ul>

</body>

</html>